<template>
	<view class="container">
		<view class="pageHead">
			<!-- <image src="../../static/arc.png" class="bgPic" mode=""></image> -->
			<view class="headPicCon">
				<image class="portrait" :src="wxuser.pic ? wxuser.pic  : userDetail.userPhoto"></image>
				<!-- <image class="portrait" :src="userDetail?userDetail.userPhoto:'/static/missing-face.png'"></image> -->
			</view>
			<view class="userInfoBox">
				<text>{{type==2?'总收益数':'剩余消费奖励'}}：{{type==2?allsum:userDetail.gg_credit }}</text>
			</view>
		</view>
		<view class="incomeList">
			<block v-if="incomes && incomes.length">
				<view :class="['incomeItem',index!=incomes.length-1?'borderbot':'']" v-for="(item, index) in incomes" :key="index">
					<view class="from">
						<view v-if="type == 1">兑换资产包花费{{item.only_money }}{{item.conduct_type == 1?'通行证':'消费奖励'}}</view>
						<view v-else>{{item.description}} {{item.type}}</view>
						<view v-if="type == 1">{{item.start_time}}</view>
						<view v-else>{{item.create_time}}</view>
					</view>
					<view class="incomeAccount">
						<image src="../static/images/Moneybag.png" class="moneyPic" mode=""></image>
						<text v-if="type == 1">-{{item.only_money }}</text>
						<text v-else>{{item.num }}</text>
					</view>
				</view>
			</block>
			<empty v-if="showempty" emptyText="当前暂无收益"></empty>
			<uni-load-more v-if="needLoad" :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty.vue"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			empty,
			uniLoadMore
		},
		data() {
			return {
				loadingType: 'more',
				needLoad: true,
				showempty: false,
				iswaitload: false,
				page: 1,
				loading: false,
				isdone: false,
				allsum: '',
				defaultlist: [],
				tabindex: 0,
				userDetail: uni.getStorageSync('userDetail'),
				incomes: [],
				ggLogs: [],
				currentPage: 1,
				total: 1,
				type: 0,
				wxuser: {}
			};
		},
		onLoad(options) {
			if (options.type == 1) {
				this.type = options.type
				this.loadIncomes()
			} else {
				this.type = options.type
				this.loadreleselog()
			}
			if (uni.getStorageSync('user')) {
				this.wxuser = uni.getStorageSync('user')
			}
		},
		onReachBottom() {
			let that = this;
			if (that.isdone) {
				return false;
			}
			that.loading = true;
			that.page++
			that.loadingType = 'loading'
			if(that.type == 1){
				that.loadIncomes()
			}else{
				that.loadreleselog()
			}
		},
		methods: {
			loadIncomes() {
				let that = this
				if (that.isdone) {
					return false;
				}
				uni.request({
					url: 'https://www.ggshop1688.com/api/conduct/profit',
					method: 'POST',
					data:{
						p:that.page
					},
					header: {
						token: uni.getStorageSync('userInfo').token
					},
				}).then(data => {
					data[1].data.data.list.forEach(item => {
						that.incomes.push(item)
					})
					that.loadingType = 'more'
					if (data[1].data.data.list.length < 20) {
						that.loading = true;
						that.isdone = true;
						that.loadingType = 'noMore'
					}
					
					that.incomes.length == 0 ? [that.showempty = true, that.needLoad = false] : [that.showempty = false, that.needLoad =
						true
					]
					// this.incomes = data[1].data.data.list
				})
			},
			loadreleselog() {
				let that = this;
				if (that.isdone) {
					return false;
				}
				uni.request({
					url: 'hhttps://www.ggshop1688.com/api/conduct/releselog',
					method: 'POST',
					data: {
						p: this.page
					},
					header: {
						token: uni.getStorageSync('userInfo').token
					},
				}).then(data => {
					that.allsum = data[1].data.data.sum
					data[1].data.data.list.forEach(item => {
						that.incomes.push(item)
					})
					that.loadingType = 'more'
					if (data[1].data.data.list.length < 20) {
						that.loading = true;
						that.isdone = true;
						that.loadingType = 'noMore'
					}
					
					that.incomes.length == 0 ? [that.showempty = true, that.needLoad = false] : [that.showempty = false, that.needLoad =
						true
					]
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.balance_tab {
		display: flex;
		justify-content: space-between;
		padding: 10px;
		justify-content: center;
		text-align: center;
		font-size: 14px;

		.gx,
		.ye {
			flex: 1;
			padding-bottom: 15px;
		}

		.balanceActive {
			border-bottom: 1px solid #d92b25;
		}
	}

	page,
	.container {
		height: 100%;
		background-color: #F8F8F8;
	}

	.borderbot {
		border-bottom: 1rpx solid $uni-border-color;
	}

	.incomeList {
		width: 710rpx;
		margin: 20rpx auto;
		background-color: #fff;
		box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.4);
		border-radius: 10rpx;
		padding: 20rpx 0 20rpx 26rpx;

		.incomeItem {

			padding: 26rpx 0;
			@extend %flexBetw;
			font-size: $uni-font-size-sm;

			.from {
				padding-left: 0.2em;
				font-size: $uni-font-size-sm;
				display: flex;
				flex-direction: column;
				font-weight: bold;
				color: $themColor;

			}

			.incomeAccount {
				@extend %flexVcenter;
				padding-right: 20rpx;

				.moneyPic {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.timer {
				width: 200rpx;
			}
		}
	}

	.pageHead {
		width: 750rpx;
		height: 330rpx;
		background: linear-gradient(to bottom, #ee5b25, #d92b25);
		position: relative;

		.headPicCon {
			height: 180rpx;
			width: 750rpx;
			@extend %flexAlCenter;

			.portrait {
				width: 130rpx;
				height: 130rpx;
				border: 5rpx solid #fff;
				border-radius: 50%;
			}
		}

		.userInfoBox {
			color: #fff;
			font-size: $uni-font-size-base;
			padding: 0 50rpx;
			@extend %flexAlCenter;
		}

		.bgPic {
			width: 750rpx;
			height: 60rpx;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
</style>
